<template>
  <div class="contentBox">
    <div class="search">
      <el-row :gutter="20" style="margin-right: 0">
        <!-- <el-col :span="3"
          ><el-select
            v-model="queryConditions.type"
            placeholder="查询条件"
            size="small"
          >
            <el-option
              v-for="item in queryConditionsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        ></el-col> -->
        <el-col :span="6">
          <el-input
            size="small "
            v-model="phone"
            placeholder="请输入手机号码"
          ></el-input>
        </el-col>
        <el-col :span="6"
          ><el-button type="primary" size="small " @click="searchData"
            >查询</el-button
          ><el-button type="primary" size="small ">重置</el-button></el-col
        >
      </el-row>
    </div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        height="100%"
        border
        style="width: 100%"
        stripe
      >
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="datetim" label="日期" align="center" width="140">
        </el-table-column>
        <el-table-column
          prop="userId"
          label="负责人联系方式"
          align="center"
          width="200"
        >
        </el-table-column>

        <el-table-column
          prop="subStatus"
          label="押金状态"
          align="center"
          width="80"
        >
          <template slot-scope="scoped"
            ><span
              :style="
                scoped.row.subStatus != 'false'
                  ? 'color:#67c23a'
                  : 'color:#f56c6c'
              "
            >
              {{ scoped.row.subStatus != "false" ? "已支付" : "未支付" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="payStatus"
          label="订单状态"
          align="center"
          width="80"
        >
          <template slot-scope="scoped"
            ><span
              :style="
                scoped.row.payStatus != 'false'
                  ? 'color:#67c23a'
                  : 'color:#f56c6c'
              "
            >
              {{ scoped.row.payStatus != "false" ? "已完成" : "未完成" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="totaltime"
          label="持续时间"
          align="center"
          width="80"
        >
          <template slot-scope="scoped"
            >{{ scoped.row.totaltime }}小时</template
          >
        </el-table-column>
        <el-table-column
          prop="totalpeople"
          label="人数"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column prop="desk" label="桌数" align="center" width="80">
        </el-table-column>
        <el-table-column
          prop="subscription"
          label="定金"
          align="center"
          width="80"
        >
        </el-table-column>
        <el-table-column prop="totalpay" label="总价" align="center" width="80">
        </el-table-column>
        <el-table-column label="菜单" align="center">
          <template slot-scope="scoped">
            <el-button type="text" @click="handleCheckMenu(scoped.row)"
              >查看菜单</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scoped">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-edit"
              @click="handleEditClick(scoped.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              style="color: red"
              icon="el-icon-delete"
              @click="handleDelete(scoped.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center; padding-top: 16px">
      <el-pagination
        background
        small
        layout="prev, pager, next"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="查看菜单"
      width="60%"
      :visible.sync="confirmDialogFormVisible"
    >
      <el-row style="color: #212121; font-weight: 700; padding-bottom: 15px">
        <el-col :span="8">菜名</el-col>
        <el-col :span="8">数量/份</el-col>
        <el-col :span="6">单价/元</el-col>
        <el-col :span="2">操作</el-col>
      </el-row>
      <div
        style="
          height: 200px;
          overflow: overlay;
          padding: 10px;
          margin: -10px;
          border: 1px solid #eee;
        "
      >
        <el-row
          v-for="(item, index) in selectRow.detial"
          :key="index"
          style="padding: 5px 0"
        >
          <el-col :span="8">{{ item.menuname }}</el-col>
          <el-col :span="8">
            <div style="display: flex; align-items: center">
              <el-button
                size="mini"
                @click="item.num > 1 ? item.num-- : item.num"
                >-</el-button
              >
              <span style="margin: 0 15px">{{ item.num }}</span>
              <el-button size="mini" @click="item.num++">+</el-button>
            </div>
          </el-col>
          <el-col :span="6">{{ item.price }}</el-col>
          <el-col :span="2"
            ><span
              style="color: #409eff; cursor: pointer"
              @click="selectRow.detial.splice(index, 1)"
              >移除</span
            ></el-col
          >
        </el-row>
      </div>

      <div slot="footer" class="footer">
        <div>
          <el-button @click="confirmDialogFormVisible = false">返 回</el-button>
          <el-button @click="handleCalTotal" type="primary">确 定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="editDialogVisible" width="50%">
      <el-form ref="form" :model="editForm" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人联系方式">
              <el-input v-model="editForm.userId"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="总价">
              <el-input v-model="editForm.totalpay"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="持续时间">
              <el-input v-model="editForm.totaltime"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="人数">
              <el-input
                v-model="editForm.totalpeople"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="12">
            <el-form-item label="桌数">
              <el-input v-model="editForm.desk"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="日期">
              <el-date-picker
                v-model="editForm.datetim"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="5">
            <el-form-item label="押金状态">
              <el-switch
                v-model="editForm.subStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch> </el-form-item
          ></el-col>
          <el-col :span="5">
            <el-form-item label="订单状态">
              <el-switch
                v-model="editForm.payStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="selectRow" @click="hendleEditConfrim"
          >确 定</el-button
        >
        <el-button type="primary" @click="hendleConfrim" v-else
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      // 表格数据
      tableData: [],
      // 查询条件
      queryConditions: {},
      // 查询条件列表
      queryConditionsOptions: [
        {
          value: "name",
          label: "按姓名查询",
        },
        {
          value: "email",
          label: "按邮箱查询",
        },
      ],
      confirmDialogFormVisible: false,
      selectRow: {},
      editDialogVisible: false,
      editForm: {},
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    async handleCalTotal() {
      // this.selectRow.totalpay=
      let total = 0;
      this.selectRow.detial.forEach((item) => {
        total += item.num * item.price;
      });
      this.selectRow.totalpay = total;
      this.editForm.detial = JSON.stringify(this.editForm.detial);
      await this.$http.post("/banservice/orderl/addorder", this.editForm);
      this.confirmDialogFormVisible = false;
      this.$message.success("修改成功");
      this.getTableData();
    },
    handleDelete(orderid) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post("/banservice/orderl/deletebyorderid", {
            orderid,
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async hendleConfrim() {
      this.editDialogVisible = false;
      // console.log(this.editForm);
    },
    async hendleEditConfrim() {
      this.editDialogVisible = false;
      this.editForm.detial = JSON.stringify(this.editForm.detial);
      await this.$http.post("/banservice/orderl/addorder", this.editForm);
      this.$message.success("修改成功");
      this.getTableData();
    },
    //按照手机号查询
    searchData() {
      this.getTableData();
    },
    async getTableData() {
      let param = {
        phone: this.phone,
      };
      const { data: res } = await this.$http.post(
        "/banservice/orderl/getallorder",
        param
      );
      // console.log(res.data);

      this.tableData = res.data.list;
      this.tableData.forEach((item) => {
        if (item.detial) item.detial = JSON.parse(item.detial);
      });
      // console.log(this.tableData);
    },
    // 点击编辑按钮
    handleEditClick(row) {
      console.log(row);
      this.selectRow = row;
      this.editForm = row;
      this.editForm.payStatus =
        this.editForm.payStatus == "true" ? true : false;
      this.editForm.subStatus =
        this.editForm.subStatus == "true" ? true : false;
      this.editDialogVisible = true;
    },
    // 点击查看菜单
    handleCheckMenu(row) {
      this.selectRow = row;
      this.editForm = row;

      this.confirmDialogFormVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.contentBox {
  .search {
    padding-bottom: 20px;
  }
  .tableBox {
    height: 63vh;
  }
}
</style>